<script lang="ts" setup>
import { ref } from 'vue'
import { User, Lock } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
const router = useRouter()
let username = ref('admin')
let password = ref('123456')
const submitForm = () => {
  // 在这里处理登录逻辑，例如发送请求等
  useUserStore()
    .Login(username.value, password.value)
    .then((res) => {
      if (res) {
        router.push('/home')
      }
    })
}
</script>

<template>
  <div class="flex justify-center items-center h-[100vh]">
    <div class="flex w-full h-full bg-white">
      <!-- 左边图片 -->
      <div class="flex-none w-1/2">
        <img src="../assets/login/bg.png" alt="Login Image" class="w-full h-full" />
      </div>
      <!-- 右边登录表单 -->
      <div class="flex flex-col justify-center items-center w-1/2">
        <h2 class="text-[30px] font-semibold mb-[20px]">Login</h2>
        <!-- 登录表单 -->
        <div class="w-1/3">
          <div class="mb-[20px]">
            <el-input v-model="username" type="text" :prefix-icon="User" placeholder="请输入账号" />
          </div>
          <div class="mb-[20px] flex-c">
            <el-input
              type="password"
              v-model="password"
              :show-password="true"
              :prefix-icon="Lock"
              placeholder="请输入密码"
            />
          </div>
          <div class="flex-c">
            <el-button type="primary" @click="submitForm" size="large"> 登录 </el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
/* 如果需要自定义样式，可以在这里添加 */
</style>
@/stores/user@/stores/counter@/stores/user
